<template>
	<div>
		<div class="logo">
			<img alt="Vue logo" src="@/assets/rel_logo1.jpg">
		</div>
		<div class="form_box">
		<!-- <template style="display: block;"> -->
		  <el-form
		    ref="ruleFormRef"
		    :model="ruleForm"
		    status-icon
		    :rules="rules"
		    label-width="120px"
		    class="demo-ruleForm"
		  >
		    <el-form-item label="手机号" prop="phone">
		      <el-input v-model="ruleForm.phone"  autocomplete="off" />
		    </el-form-item>
		    <el-form-item label="密码" prop="pass">
		      <el-input v-model="ruleForm.pass" type="password" autocomplete="off" />
		    </el-form-item>
		    <el-form-item label="重复密码" prop="repass">
		      <el-input v-model="ruleForm.repass" type="password" autocomplete="off" />
		    </el-form-item>
		    <el-form-item>
		      <el-button type="primary" @click="submitForm(ruleFormRef)"
		        >提交</el-button
		      >
		      <el-button type="plain" @click="submitForm_login(ruleFormRef)"
		        >登录</el-button
		      >
		    </el-form-item>
		  </el-form>
		<!-- </template> -->
		</div>
	</div>
</template>
<script type="text/javascript">
	import  { FormInstance,FormRules,ElMessage  } from 'element-plus'
	import {USERNAME,PREFIX,IDENT,EQUAL,EXPIRES} from '@/utils/currency.js'
	const Base64 = require("js-base64").Base64//引入加密方式
	export default{
		data(){
			return {
				ruleFormRef:{},
				ruleForm :{
				  pass: '',
				  name: '',
				},
				rules:{
				  pass: [
				    { required: true, message: '请输入密码', trigger: 'blur' },
				    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
				  ],
				  repass: [
				    { required: true, message: '请重复密码', trigger: 'blur' },
				    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
				  ],
				  phone: [
				    { required: true, message: '请输入手机号', trigger: 'blur' },
				    // { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
				  ],
				}
			}
		},
		methods:{
			submitForm_login(){
				this.$store.commit("toLogin");//跳转登录页
			},
			 async submitForm(val){ // 登录
				if(!this.ruleForm.pass || !this.ruleForm.phone) return;
				if(this.ruleForm.pass != this.ruleForm.repass) return;
				const params={//登录账户的参数
					password:this.ruleForm.pass,
					username:this.ruleForm.phone
				}
				const params_re={ // 注册账户的参数
					password:this.ruleForm.pass,
					phone:this.ruleForm.phone.toString()
				}

				try{
					const res =await this.$API.registor(params_re)
					if(res.code == 200){
						//注册成功
						ElMessage({
							message: '注册成功，审核中...',
							type: 'success',
						})
						// const res1=await this.$store.dispatch("toLogin",params);
						// if(res1.code==200){
						// 	//登录成功,存入cookie
						// 	let password = Base64.encode(this.ruleForm.pass); // base64加密
						// 	let name = Base64.encode(this.ruleForm.name); // base64加密
						// 	const param2={
						// 		password,
						// 		username:name
						// 	}
						// 	const res2=await this.$store.dispatch("setCookie",param2);
						// 	if(res2.status==1){
						// 		 this.$store.commit("setToken",res1.data.access_token) // 保存token
						// 		 sessionStorage.setItem("active",0)
						// 		 sessionStorage.setItem("active_children",0)
						// 		 this.$store.commit("toIndex");//成功写入cookie之后,跳转首页
						// 	}
						// }
					}
					else{
						// //注册失败
						console.log(res)
						ElMessage({
							message: res.response.data.message,
							type: 'warning',
						})
					}
				}
				catch(error){
					console.log(error);
					ElMessage({
						message: '登录失败',
						type: 'warning',
					})
				}
			},
		},
		mounted(){
			// console.log(PREFIX);
			// this.getCookie();
			// console.log(FormRules)
		}
	}
</script>
<style type="text/css">
	.form_box{
		    width: 50%;
    margin: 0 auto;
    max-width: 400px;
	}
	.logo>img{
		width: 20%;
		max-width: 300px;
	}
	.logo{
		margin: 5rem 0;
	}
</style>
